<template>
  <h1>Hello Vue3</h1>
  <h2>{{ obj }}</h2>
  <button @click="obj.age++">点击大一岁</button>
  <button @click="obj.name += '啊'">点击啊一下</button>

</template>

<script>
import { reactive, ref, watch } from 'vue'
/* 
  目标：掌握使用 watch 函数定义侦听器

*/
export default {
  name: 'App',
  setup() {
    console.log('setup组合API的起点')
    // 情况3：监听 reactive 定义的响应式数据

    const obj = reactive({
      name: '小白',
      age: 18,
    })

    // 注意：reactive 对象的新值和旧值是同一个内存地址
    watch(obj, newVal => {
      console.log('obj对象发生了变化', newVal)
    })

    return { obj }
  },
}
</script>

<style></style>
